<template>
	<view>
		<view class="uni-ellipsis-2" style="color: #000; font-weight: 600;">
			{{user.title || ''}}
		</view>
		<view class="" style="display: flex; margin-top: 15rpx; justify-content: space-between;">
			<view class="uni-ellipsis-3" style="color: #B2B2B2;  display: flex; flex-direction:column;" >
				<view class="" style="margin-top: 15rpx;">
					<view class="" >
						<view class="" style="display: flex;font-size: 25rpx;align-items:center;">
							已筹:<view style="font-size: 30rpx; font-weight: bold;">{{user.money_count||'0'}}</view>元
						</view>
						<view class="" style="font-size: 25rpx;">
							急需:{{user.goal_money||'0'}}元
						</view>
					</view>
				</view>
				
				
				<!-- <view class="jdbar" style="margin-top: 25rpx;">
					<view class="jdper" :per="user.pre" :style="{maxWidth:user.pre}"></view>
				</view> -->
				
				
			
				<view class="progress-bar" style="margin-top: 25rpx;">  
				  <!-- <view class="progress-bar-fill" style="width: 45%;"></view>  -->
				  <view class="progress-bar-fill" :style="{width:user.pre}"></view> 
				</view>
				
				
			</view>
			<view class="">
				<image style="width: 120rpx; height: 120rpx;border-radius: 15rpx;" :src=" photo_cdn1+user.image"  mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {getDonationList,getDonationByInfo,carateDonation , updateDonation} from "@/utils/api/zupu.js" 
	import config from "@/utils/config.js";
	let {staticurl,photo_cdn1} = config.baseUrl;
	export default {
		props: {
			ids: {
				type:Number ,
				default(){
					return;
				}
			},
		},
		data() {
			return {
				photo_cdn1,
				user:{
					title:'',
					image:null,
					content:null
				}
			}
		},
		watch:{
			ids: { 
				handler(value) {
					console.log(value)
					getDonationByInfo({
						id:value
					}).then(res=>{
						this.user = res.data;
						this.user.image = res.data.image[0];
					})
					
				}, 
				immediate: true,//设置为 true 时，第一次进入页面时即监听
				deep: true ,// 深度监听父组件传过来对象变化 
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	.progress-bar {  
	  width: 100%;  
	  height: 10px;  
	  background-color: #eee;  
	  border-radius: 5px;  
	}  
	  
	.progress-bar-fill {  
	  width: 0%;  
	  height: 100%;  
	  background-color: #4caf50;  
	  border-radius: 5px;  
	}
	
	.jdt {
		margin-left: 100px;
	}
	 
	.jd_title {
		margin-top: 20px;
		margin-bottom: 20px;
	}
	 
	.jdbar {
		background: rgb(227, 227, 227);
		height: 10px;
		width: 100%;
	}
	 
	.jdper {
		height: 10px;
		background: #f30;
		max-width: 100%;
		width: 100%;
		position: relative;
		animation: aniBar 1s;
	}
	 
	.jdper::before {
		position: absolute;
		content: attr(per);
		width: 60rpx;
		background: #f30;
		padding: 2rpx 5rpx;
		border-radius: 2rpx;
		font-size: 12rpx;
		right: -15px;
		top: -30px;
		color: #fff;
		transform: translateX(50%); 
	}
	 
	.jdper::after {
		content: "";
		width: 10rpx;
		height: 10rpx;
		display: inline-block;
		background: #f30;
		position: absolute;
		right: 0;
		top: -18px;
		z-index: -1;
		border-radius: 2px;
		transform: translateX(50%) rotate(45deg);
	}
	/* 文本溢出隐藏 三行 */
	.uni-ellipsis-3 {
		/* #ifdef APP-NVUE */
		// nvue下，可以直接使用lines属性，这是weex特有样式
		lines: 3;
		text-overflow: ellipsis;
		// max-height: 64rpx;
		/* #endif */
		
		/* #ifndef APP-NVUE */
		display: -webkit-box!important;
		text-overflow: ellipsis;
		word-break: break-all;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical!important;
		/* #endif */
		
		line-height: 1.5;
		overflow: hidden;
	}
	/* 文本溢出隐藏 两行 */
	.uni-ellipsis-2 {
		/* #ifdef APP-NVUE */
		// nvue下，可以直接使用lines属性，这是weex特有样式
		lines: 2;
		text-overflow: ellipsis;
		// max-height: 64rpx;
		/* #endif */
		
		/* #ifndef APP-NVUE */
		display: -webkit-box!important;
		text-overflow: ellipsis;
		word-break: break-all;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical!important;
		/* #endif */
		
		line-height: 1.2;
		overflow: hidden;
	}
</style>
